import Taro from '@tarojs/taro';
import { Text, View } from '@tarojs/components';
import { Cell, Icon } from '@nutui/nutui-react-taro';
import { useDispatch } from 'react-redux';
import { setEditTask, deleteTask } from '../../store/taskSlice.js';
import { TASK_STATUS } from '../../const/const.js';
import './TaskItem.scss'

export default function TaskCard(props) {
    const { item, isShowStatus } = props;
    const dispatch = useDispatch();

    const editNowTask = function(item) {
      dispatch(setEditTask({
        id: item.id
      }));
      // dispatch(toggleEdit());
      Taro.navigateTo({
        url: '/pages/taskEdit/index'
      })
    }

    /**
     * 删除当前任务
     * @param {Object} item 
     */
    const deleteTaskItem = function(item) {
      Taro.showModal({
        title: '温馨提示',
        content: '确认要删除当前任务么？删除不可恢复！',
        success: function (res) {
          if (res.confirm) {
            dispatch(deleteTask({
              id: item.id
            }));
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
    return (
      <Cell className='task-wrap' key={item.id}>
        <View className='task-desc'>
          <Text>{item.title}</Text>
          {isShowStatus ? <Text>{TASK_STATUS[item.status].text}</Text> : ''}
        </View>
        <View className='handle-btn-wrap'>
          <Icon className='handle-btn' onClick={ () => editNowTask(item) } name='edit' size='10px' />
          <Icon name='close' size='10px' onClick={ () => deleteTaskItem(item) } />
        </View>
      </Cell>
    )
}
